<script>
export default {
  data() {
    return {
      num: 1,
      total:0,
      checked: true,
      labelPosition: 'right',
      user: {
        username: '',
        userTel: '',
        usertype: ''
      },
      viewList:{
        viewId: "",
        cityId: "",
        viewName: "",
        viewPic: "",
        viewInfo: "",
        viewPic1: "",
        viewInfo1: "",
        viewAddr: "",
        viewPrice: "",
        viewMark: "",
        viewInfo2: ""
      }
    };
  },
  methods: {
    handleChange(value) {
      // console.log(value);
     this.total= value * this.viewList.viewPrice
      console.log(this.total)
      //this.$router.push({name:'success'})
    },
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    },
    viewOrder(){
      var  id = this.$route.params.viewId
      console.log(id)
      this.$axios.get('/view/viewId',
        {
          params: {
            viewId: id
          }
        }
      ).then(res=>{
        console.log(res.data.data)
        this.viewList = res.data.data
      })
    },
    onSubmit(){
      console.log(this.total)
      this.$router.push({name:'success'})
    }
  },
  mounted() {
    this.viewOrder();
  }

};
</script>

<template>
<div class="map-container">
  <el-row class="top">
    <el-col :span="16" style=""><img src="http://simg1.qunarzz.com/piao/images/tts/ocenter/tips_logo.png
">去哪儿网客户服务中心：95117（如在境外拨打，请加拨0086)</el-col>
    <el-col :span="8"><span>适老化及无障碍&nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;去哪儿通行证 &nbsp;&nbsp;</span>
      <span>登录 &nbsp;&nbsp;&nbsp;| &nbsp;&nbsp;&nbsp;注册</span></el-col>
  </el-row>
    <div class="mp-section">
      <el-tag class="top1">1，填写信息</el-tag>
      <el-tag class="top1">2，在线支付</el-tag>
      <el-tag class="top1">3，正规商家，入院无忧</el-tag>
    </div>

  <div class="top2">
    <div>
      <el-row>
        <el-col :span="20"><h2>{{ viewList.viewInfo }}</h2></el-col>
        <el-col :span="4">
          <br>
          <br>
          <span style="font-weight: bold;font-size: 25px;color:#f60;">&nbsp;&nbsp;&nbsp;{{ viewList.viewPrice }}￥</span><span>/张</span>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <el-col :span="4">
          <span style="font-weight: bold;margin-left: 20px" >游玩日期：</span>

        </el-col>
        <el-col :span="7"><span style="color:#00afc7;">游玩日期:2023年11月08日</span></el-col>
        <el-col :span="7"><span>请在游玩当天的06:00前完成预订</span></el-col>
      </el-row>
    </div>
    <br>
    <div>
      <el-row>
        <el-col :span="4"> <span style="font-weight: bold;margin-left: 20px" >已选规格：</span></el-col>
        <el-col :span="20"><span>成人 16-22人头等舱团❤酒店接 特色中餐 双景区无线耳麦 人工讲解</span></el-col>
      </el-row>
    </div>
    <br>
    <div>
      <el-row>
        <el-col :span="4"><span style="font-weight: bold;margin-left: 20px" >购买张数：</span></el-col>
        <el-col :span="6">
          <el-input-number
            v-model="num" @change="handleChange" :min="1" :max="50" label="描述文字">
          </el-input-number>
        </el-col>

        <el-col :span="4"><span>最多50张</span></el-col>
      </el-row>
    </div>
    <br>
    <div>
      <el-row>
        <el-col :span="5"><h1 style="margin-left: 20px">游客信息 </h1></el-col>
        <br><br>
        <el-col :span="8"><span>请填写所有1位游客信息</span></el-col>
      </el-row>
    </div>
    <br><br>
    <div>
      <el-form :label-position="labelPosition" label-width="80px" :model="user" class="input">
        <el-form-item label="姓名" style="color: black;">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="user.userTel"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="user.usertype"></el-input>
        </el-form-item>
      </el-form>
      <el-checkbox v-model="checked" style="margin-left: 80px;">保存常用联系人</el-checkbox>
      <el-checkbox v-model="checked">我已阅读并接受合同条款、补充条款及其他所有内容
      </el-checkbox>
    </div>

    <div>
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item>
        <el-button type="success" @click="onSubmit()" class="button">提交订单</el-button>
      </el-form-item>
      </el-form>
    </div>

  </div>

  <div class="top2right">
    <h2 style="margin-left: 30px">购票须知</h2>

    <div style="margin-left: 20px">退款限制<br>
      使用日期截止前1天14:00前可申请退款</div>
    <div style="margin-left: 20px">出行信息</div>
    <div style="margin-left: 20px">景点名称：viewName</div>
    <div style="margin-left: 20px">入园日期：游玩日期当天有效</div>
    <div><el-button type="text" @click="open"> <el-button style="margin-left: 20px">详情购买须知>></el-button></el-button></div>

    <div style="font-size: 18px;margin-left: 25px;font-weight: bolder">订单总额：<span style="color: #ff6600;font-size: 30px">{{ this.total }}</span>
      <span>/{{this.num}}张</span></div>
  </div>

</div>
</template>

<style scoped>
.map-container{
  background-image: url('../assets/7.jpg');
  background-size: cover;
  background-position: center center;
//opacity: 0.9;
  width: 1520px;
  height: 900px;
}
.button{
  width: 150px;
  height: 50px;
  margin-top: 30px;
  margin-left: 170px;
}
.input{
  width: 500px;
  margin-left: 100px;
  color: black;
  font-weight: bold;
  font-size: 18px;
}
.top{
  font-size: 14px;
  background-color: #f4f4f4;
  min-height: 36px;
  border-radius: 4px;
}
.top1 {
  width: 250px;
  //text-indent: 70px;
  background: #00bcd4;
  //border-radius: 5px 0 0 5px;
  color: #fff;
  font-size: 16px;

}
.mp-section{
  width: 1190px;
  //margin: 0 auto;
  margin-top: 20px;
  margin-left: 480px;
  font-size: 20px;
  font-family: "Hiragino Sans GB","微软雅黑",Tahoma,Arial,sans-serif;
}
.top2{
  margin-top: 20px;
  margin-left: 200px;
  width: 800px;
  height: 700px;
  border: 3px solid white;
  //background-color: silver;
}
.top2right{
  width: 300px;
  height: 400px;
  border: 3px solid white;
  //background-color: gold;
  margin-left: 1050px;
  margin-top: -650px;
}
</style>
